<script setup>
import {onMounted, getCurrentInstance, ref, defineEmits, reactive,watch} from "vue";
import {deleteRouterById, routerPage} from '@/api/basal.js'
import Pagination from "@/components/debris/Pagination.vue";
import SearchInput from "@/components/debris/SearchInput.vue";
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
import Dialog from "@/components/debris/Dialog.vue";
const emit = defineEmits(['innerLink'])
const {proxy} = getCurrentInstance();
const total = ref(0)
const query = reactive({pageNo:1,pageSize:10,createSystemCode:import.meta.env.VITE_SYSTEM_CODE})
const rows = ref([])
onMounted(() => {
  onLoadData(query)
})

watch(query,(newParams) => {
  onLoadData(newParams)
})

function onLoadData(param){
  routerPage(param).then(result => {
    if(result.code === ResultEnums.SUCCESS ){
      let data = result.data
      total.value = data.total
      rows.value = data.records
    }
  })
}

function deleteById(systemCode,id){
  deleteRouterById(systemCode,id).then(result => {
    if(result.code === ResultEnums.SUCCESS ){
      window.location.reload();
    }
  })
}

function innerLink(e,url,params){
  e.preventDefault();
  emit('innerLink',url,params)
}

</script>

<template>

  <div class="row g-3 mb-4 align-items-center justify-content-between">
    <div class="col-auto" v-if="proxy.$route.meta">
      <h1 class="app-page-title mb-0">{{ proxy.$route.meta.theme }}</h1>
    </div>
    <div class="col-auto">
      <div class="page-utilities">
        <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
          <SearchInput placeholder="请输入角色名称" @QueryParams="(content)=>{query.keyword = content.keyword ; query.createSystemCode=content.systemCode}"/><!--//col-->
        </div><!--//row-->
      </div><!--//table-utilities-->
    </div><!--//col-auto-->
  </div><!--//row-->
  <div class="table-responsive">
    <table class="table app-table-hover mb-0 text-left">
      <thead>
      <tr>
        <th class="cell">描述</th>
        <th class="cell">扫描路径</th>
        <th class="cell">分组信息</th>
        <th class="cell">最近操作时间</th>
        <th class="cell">状态</th>
        <th class="cell">
          <button type="button" class="btn btn-secondary btn-sm" @click="innerLink($event,`/home/router/edit`,{systemCode:query.createSystemCode})" >新建</button>
        </th>
      </tr>
      </thead>
      <tbody v-if="rows">
      <tr v-for="row in rows">
        <td class="cell">{{row.routerDescribed}}</td>
        <td class="cell">{{row.routerUrl}}</td>
        <td class="cell">{{row.routerSignboard}}</td>
        <td class="cell">
          {{ row.updateTime ? new Date(row.updateTime).toLocaleDateString() : row.updateTime}}
        </td>
        <td class="cell">
          <template v-if="row.isEnable">
            <span class='badge bg-success'>启用</span>
          </template>
          <template>
            <span class='badge bg-warning'>弃用</span>
          </template>
        </td>
        <td class="cell">
          <button type="button" class="btn btn-outline-info btn-sm" @click="innerLink($event,`/home/router/relation`,{id:row.id,systemCode:row.createSystemCode})" >绑定</button>
          <button type="button" class="btn btn-outline-primary btn-sm" @click="innerLink($event,`/home/router/edit`,{id:row.id,systemCode:row.createSystemCode})" >编辑</button>
          <button type="button" class="btn btn-outline-light btn-sm" data-bs-toggle="modal" :data-bs-target="`#dialog-${row.id}`" >删除</button>
          <Dialog theme="角色删除请求" :content="`您确定删除 “${row.routerDescribed}” 吗？`" :row="row" @confirm="(r)=>{deleteById(r.createSystemCode,r.id)}"
                  :id="`dialog-${row.id}`" :primary="`${row.id}`"/>
        </td>
      </tr>
      </tbody>
    </table>
  </div><!--//table-responsive-->
  <br/>
  <Pagination :page-size=query.pageSize :total=total :span=2
              @current-change="(num)=>{query.pageNo=num}"/><!--//app-pagination-->
</template>